<template>
    <g>
        <foreignObject width="100%" height="100%" style="position: absolute">

            <body xmlns="http://www.w3.org/1999/xhtml" :style="getSimulateSelArea()" id="simulate_sel_area">
            </body>
        </foreignObject>
    </g>
</template>

<script setup>
const props = defineProps({
    simulate_sel_area: {
        type: Object,
        default: () => {
            return {
                left: 0,
                top: 0,
                width: 0,
                height: 0
            };
        }
    },
    scale: {
        type: Number,
        default: 1
    }
})

const getSimulateSelArea = () => {
    const { left, top, width, height } = props.simulate_sel_area;
    const borderWidth = props.scale < 1 ? 2 : 3
    return `width: ${width}px; height: ${height}px; left: ${left}px; top: ${top}px; border: ${borderWidth}px dashed #289de9;position: absolute;`;
}
</script>